<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">

    <title>

        起步 &middot; Mower-前端开发框架

    </title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="mower/admin/css/mower.min.css" rel="stylesheet">

    <!-- Documentation extras -->
    <link href="assets/css/docs.css" rel="stylesheet">

    <!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
    <script src="assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Favicons -->
    <link rel="icon" href="../favicon.ico">
</head>

<body>
    <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

    <!-- Docs master nav -->
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="../index.html" class="navbar-brand">Mower</a>
            </div>
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="getting-started.html">开始</a>
                    </li>
                    <li >
                        <a href="css.html">基础</a>
                    </li>
                    <li>
                        <a href="controls.html">控件</a>
                    </li>
                    <li>
                        <a href="components.html">组件</a>
                    </li>
                    <li>
                        <a href="javascript.html">Javascript插件</a>
                    </li>
                    <li>
                        <a href="view.html">视图</a>
                    </li>
                </ul>
                 <ul class="nav navbar-nav navbar-right">
                     <li><a href="examples/admin/">示例</a></li>
                </ul>
            </nav>
        </div>
    </header>


    <!-- Docs page layout -->
    <div class="bs-docs-header" id="content">
        <div class="container">
            <h1>起步</h1>
            <p>简要介绍 Mower，以及如何使用，还有编译及定制，等等。</p>



        </div>
    </div>

    <div class="container bs-docs-container">

        <div class="row">
            <div class="col-md-9" role="main">
                <div class="bs-docs-section">
                    <h2 id="intruduction" class="page-header">说明</h2>

                    <h3 class="item-header">与Bootstrap的关系</h3>
                    <p>Mower继承了Bootstrap 3中的大部分基础内容，但出于与Bootstrap不同的目的大部分内容都进行了定制和修改。这些变化包括：</p>
                    <ul>
                      <li>新增了几个Javascript组件，包括菜单、面包屑、选项卡、下拉树、下拉表格等；</li>
                      <li>集成了一些实用的第三方组件，包括bootstrap-modal、datatables、jquery-treetable、jstree、bootstrap-validator等，并且这些组件样式经过重写，风格更为统一；</li>
                      <li>增加了配色表和新的主题模板，最少只需更改一个配置项更换颜色主题；</li>
                      <li>修改了默认字体配置，包含所使用的字体集和字体大小；</li>
                      <li>替换了默认的字体图标，在FontAwesome图标集的基础上去掉了一些图标同时增加了一些新的图标，写法上比FontAwesome更简单；</li>
                      <li>增加了一些辅助类，例如文本背景及高亮等；</li>
                    </ul>
                    <h3 class="item-header">选择使用Mower</h3>
                    <p>Bootstrap是非常优秀的前端框架，但在构建大型应用的开发时通常远远不够。如果Bootstrap能够完全满足你的项目，建议使用Bootstrap，如果你需要的更多，则建议使用Mower。使用Mower的显著理由如下：</p>
                    <ul>
                      <li>大部分书写方式继承Bootstrap，从Bootstrap方便迁移到ZUI，学习成本低，而且写法上更精简；</li>
                      <li>需要的实用功能都能在Mower中提供，即使是第三方组件也提供统一的样式和主题支持；</li>
                      <li>Javascript组件支持HTML5 data-*属性，让你写更少的js代码；</li>
                      <li>一些令人激动的新内容正在开发中...</li>
                    </ul>
                </div>
                <div class="bs-docs-section">
                    <h2 id="rules" class="page-header">约定</h2>
                    <h3 class="item-header">UI元素类型及定义</h3>
                            <p>Mower中包含各种各样的界面元素（或控件），例如按钮、列表、表格等。现把这些元素归为如下四类：</p>
                            <ul>
                              <li><strong>基本控件</strong>：用来构建网页应用的基本界面单元，例如按钮、文本标签、输入框等。</li>
                              <li><strong>组件</strong>：通过一个以上的基本控件组合而成的较复杂的界面单元。例如表单、菜单、表格等。</li>
                              <li><strong>Javascript 组件</strong>：这些组件要正常使用会使用到Javascript。某些Javascript组件需要手动调用来启用。</li>
                              <li><strong>视图</strong>：视图是将基本控件和组件组合使用来展现网站上的通用内容，例如前后端模板等。</li>
                            </ul>
                            <p>Mower中的大多数界面元素都有不同的子类型、状态及参数。关于类型、状态及参数的定义如下：</p>
                            <ul>
                              <li><strong>类型</strong>：同一种界面单元的不同类型，例如按钮有主要按钮、次要按钮及危险按钮等，导航菜单类型有普通导航及顶部固定导航等。任何时候都应该只为同一个界面元素指定一种类型，默认类型无需指定。</li>
                              <li><strong>状态</strong>：状态为同一种界面单元允许在不同的状态中切换，例如按钮有正常状态和不可用状态，下拉菜单有展开及收拢状态，菜单项目有选中和未选中状态等。在同一个界面元素中允许叠加多个状态。</li>
                              <li><strong>参数</strong>：参数作为界面单元如何展现提供依据，例如表格是否隔行变色，是否启用鼠标悬停等。可以同时指定多个参数。</li>
                            </ul>

                            <h3 class="item-header">通用状态和参数</h3>
                            <p>很多状态和参数在不同的控件或组件中具有一致的用法和相同的含义。在Mower中，这些通用的状态和参数具有固定的名字（CSS 类名）。</p>
                            <p>常用通用状态如下：</p>
                            <table class="table table-bordered">
                              <thead>
                                <tr>
                                  <th style="width: 80px">名称</th>
                                  <th>说明</th>
                                  <th>常见使用对象</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>
                                  <td><code>.active</code></td>
                                  <td>指示控件或者其子项目已经被激活。</td>
                                  <td>导航条目、下拉菜单条目、菜单列表、按钮组中可以激活的按钮等。</td>
                                </tr>
                                <tr>
                                  <td><code>.hover</code></td>
                                  <td>指示控件正处于鼠标悬停状态，在CSS中相对于<code>:hover</code>选择器。</td>
                                  <td>少部分需要Javascript处理的控件。</td>
                                </tr>
                                <tr>
                                  <td><code>.focus</code></td>
                                  <td>指示控件正处于鼠标悬停状态，在CSS中相对于<code>:focus</code>选择器。</td>
                                  <td>少部分需要Javascript处理的控件。</td>
                                </tr>
                                <tr>
                                  <td><code>.disabled</code></td>
                                  <td>指示控件处于不可用状态，通常与DOM属性<code>disabled="disabled"</code>一起使用。</td>
                                  <td>按钮、可以点击菜单项目、超链接、表单元素等。</td>
                                </tr>
                                <tr>
                                  <td><code>.in</code></td>
                                  <td>用于控制控件显示或消失的动画过程。在控件显示时指示控件已准备完成CSS动画并完全显示；在控件消失时如果移除该状态指示控件已准备执行控件消失动画；与状态<code>.collapse</code>一起使用时表示处于完全展开状态。</td>
                                  <td>标签页、下拉菜单等</td>
                                </tr>
                                <tr>
                                  <td><code>.open</code></td>
                                  <td>指示隐藏的内容已经完全展示。</td>
                                  <td>下拉菜单等。</td>
                                </tr>
                                <tr>
                                  <td><code>.collapse</code></td>
                                  <td>指示当前组件可以被折叠或展开。与状态<code>.in</code>一起出现时表示组件已被展开，没有此状态则反之。</td>
                                  <td>响应式导航、折叠菜单等。</td>
                                </tr>
                                <tr>
                                  <td><code>.collapsing</code></td>
                                  <td>指示当前组件正处于折叠或展开的动画过程中。</td>
                                  <td>响应式导航、折叠菜单等。</td>
                                </tr>
                              </tbody>
                            </table>
                            <p>常见的通用参数如下：</p>
                            <table class="table table-bordered">
                              <thead>
                                <tr>
                                  <th style="width: 80px">名称</th>
                                  <th>说明</th>
                                  <th>常见使用对象</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>
                                  <td><code>.bordered</code></td>
                                  <td>使得组件具备边框样式。</td>
                                  <td>表格等。</td>
                                </tr>
                                <tr>
                                  <td><code>.borderless</code></td>
                                  <td>移除控件的边框样式。</td>
                                  <td>表格等。</td>
                                </tr>
                                <tr>
                                  <td><code>.inverse</code></td>
                                  <td>指示组件使用与默认颜色样式相对的样式。</td>
                                  <td>导航等。</td>
                                </tr>
                                <tr>
                                  <td><code>.fixed</code></td>
                                  <td>指示当前组件位置被固定，不收页面交互影响。</td>
                                  <td></td>
                                </tr>
                                <tr>
                                  <td><code>.with-icon</code></td>
                                  <td>指示当前组件在显示内容时能够额外显示一个图标。</td>
                                  <td>消息框等。</td>
                                </tr>
                                <tr>
                                  <td><code>.with-padding</code></td>
                                  <td>指示当前组件内容显示区域包含更多的边距。</td>
                                  <td></td>
                                </tr>
                              </tbody>
                            </table>
                            <h3 class="item-header">界面元素的命名</h3>
                            <h4 class="subitem-header">命名原则</h4>
                            <ul>
                              <li>所有控件、组件、视图、模块和行为的命名都应该使用最常见的名称，准确提现界面元素功能。例如菜单应该命名为menu，而不是navigation。</li>
                              <li>类型、状态及参数的命名均为元素名加上类型（或状态及参数名）前缀，中间用间隔号分隔，例如固定位置的菜单为<code>.menu-fixed</code>。对于通用状态或参数可以省略前缀，例如一个菜单项目处于激活状态，则只需命名为<code>.active</code>，而不许命名为<code>.menu-active</code>。</li>
                              <li>所有控件、组件、模块和行为的命名均不加与当前元素功能无关的前缀和额外命名，例如一个导航菜单命名为<code>.nav</code>，而不增加额外命名为<code>.ui.nav</code>或者<code>.mu.nav</code>。</li>
                            </ul>
                </div>
                <div class="bs-docs-section">
                        <div class="page-header">
                          <h2>文件目录结构</h2>
                        </div>

                        <h3 class="item-header">预编译的内容</h3>
                        <p>下载预编译压缩包解压后将会得到以下目录结构：</p>
                        <pre>
mower/
├── admin
│    ├── css/
│    │   ├── azure.css
│    │   ├── azure.min.css
│    │   ├── ......
│    │   ├── orange.css
│    │   ├── orange.min.css
│    │   ├── mower.css
│    │   └── mower.min.css
│    ├── js/
│    │   ├── mower.js
│    │   ├── mower.min.js
│    ├── fonts/
│    │   ├── fontawesome-webfont.eot
│    │   ├── fontawesome-webfont.svg
│    │   ├── fontawesome-webfont.ttf
│    │   ├── fontawesome-webfont.ttf
│    │   ├── fontawesome-webfont2.ttf
│    │   └── FontAwesome.otf
│    └── img/
├── front
│    ├── css/
│    │   ├── mower.css
│    │   └── mower.min.css
│    ├── js/
│    │   ├── mower.js
│    │   ├── mower.min.js
│    ├── fonts/
│    │   ├── fontawesome-webfont.eot
│    │   ├── fontawesome-webfont.svg
│    │   ├── fontawesome-webfont.ttf
│    │   ├── fontawesome-webfont.ttf
│    │   ├── fontawesome-webfont2.ttf
│    │   └── FontAwesome.otf
│    └── img/
                        </pre>
                        <p>mower目录下提供了两种编译类型：‘admin’、‘front’，其中‘admin’适用于后端应用系统，而‘front’去除某些Javascript组件等，例如Datatables，编译得到适用于前端系统的精简版本。每种编译类型均提供了压缩版本，对应的文件名为‘*.min.css’。js目录下提供对应的js文件。字体图标放在‘fonts’文件夹下。admin/css目录下存放一些主题样式。</p>

                        <h3 class="item-header">源码目录结构</h3>
                        <p>可以随时从Github上下载Mower的源码。不仅仅包含所有开发源码文件，而且包含完整的文档和示例。如果你需要定制的编译版本更应该下载源码。以下简要说明源码目录结构。</p>
                <pre>
mower/
├── src/                         Mower的源码目录
│   ├── css/
│   ├── js/
├── plugins/                     一些依赖通用插件
│   ├── css/
│   ├── js/
├── dist/                        预编译输出目录
│   ├── admin/
│   ├── front/
├── docs/                        文档
│   ├── assets/                  一些依赖的或者配合examples使用的其他资源
│   ├── bootstrap/               bootstrap 基础包
│   ├── examples/                文档中用到的例子   
│   └── libs/                    一些依赖的库文件，例如Jquery                   
└── Gruntfile.js                 Grunt编译脚本
                </pre>
                      </section>
                </div>
                <div class="bs-docs-section">
                  <h2 id="rules" class="page-header">编译及定制</h2>
                  <p>Mower使用 <a href="http://gruntjs.com/">Grunt</a> 作为编译系统。如果不了解 Grunt 也没有关系，Grunt是一个非常棒而且容易上手的工具。下面给出简要步骤来准备编译ZUI，如果想了解更多请访问Grunt官方网站。</p>
                  <h3 class="item-header">安装Grunt</h3>
                  <p>Grunt构建在nodejs之上。在安装Grunt之前需要首先<a href="http://nodejs.org/download/" target="_blank">下载并安装node.js</a>。最新版的nodejs已包含npm（<a href="http://npmjs.org/" target="_blank">node packaged modules</a>）。npm是nodejs用来管理扩展包的工具。</p>
                  <p>安装nodejs之后，在命令行进行如下操作：</p>
                  <ol>
                    <li>在全局环境中安装<code>grunt-cli</code>：<code>npm install -g grunt-cli</code>。</li>
                    <li>进入Mower源码目录，执行<code>npm install</code>命令。nmp将读取包配置文件<code>package.json</code>文件并自动安装所有依赖的扩展包。</li>
                  </ol>
                  <p>完成上述步骤就可以进行编译了。只需要进入ZUI中使用命令行输入对应的命令就可以启动编译任务。内置的<code>build</code>命令可以完成大部分编译任务。以下为Mower内置的一些常用任务命令。</p>
                  <table class="table table-bordered">
                    <thead>
                      <th style="width: 200px">命令</th>
                      <th style="width: 40%">说明</th>
                      <th>输出目录</th>
                    </thead>
                    <tr>
                      <td><code>grunt admin</code></td>
                      <td>编译后端版</td>
                      <td><ul>
                        <li>dist/admin/js/mower*.js</li>
                        <li>dist/admin/css/mower*.css</li>
                        <li>dist/admin/fonts/**</li>
                        <li>dist/admin/img/**</li>
                      </ul></td>
                    </tr>
                    <tr>
                      <td><code>grunt front</code></td>
                      <td>编译前端版</td>
                      <td><ul>
                        <li>dist/front/js/mower*.js</li>
                        <li>dist/front/css/mower*.css</li>
                        <li>dist/front/fonts/**</li>
                        <li>dist/front/img/**</li>
                      </ul></td>
                    </tr>
                  </table>
                  <p>如果了解Grunt，当然可以通过编辑<code>Gruntfile.js</code>文件来定义自己的编译任务。</p>
                </div>
                <div class="bs-docs-section">
                    <h2 id="support" class="page-header">浏览器和设备的支持情况</h2>
                    <div class="bs-callout bs-callout-info" id="callout-glyphicons-location">
                        <p><i class="fa fa-pencil-square-o fa-2x"></i> 以下说明信息来自于 <a href="http://v3.bootcss.com/">Bootstrap中文官方</a> 文档说明，同样适用于Mower。</p>
                    </div>
                    <p class="lead">Boostrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。</p>
                    <h3 class="item-header" id="support-browsers">被支持的浏览器</h3>
                    <p>特别注意，我们坚决支持这些浏览器的<strong>最新版本</strong>。在 Windows 平台，我们支持<strong> Internet Explorer 8-11</strong>。请看下面列出的详细信息。</p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <td></td>
                                    <th>Chrome</th>
                                    <th>Firefox</th>
                                    <th>Internet Explorer</th>
                                    <th>Opera</th>
                                    <th>Safari</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">Android</th>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                    <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
                                    <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 不支持</td>
                                    <td class="text-muted">N/A</td>
                                </tr>
                                <tr>
                                    <th scope="row">iOS</th>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                    <td class="text-muted">N/A</td>
                                    <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 不支持</td>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                </tr>
                                <tr>
                                    <th scope="row">Mac OS X</th>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                </tr>
                                <tr>
                                    <th scope="row">Windows</th>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                    <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 不支持</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <p>Bootstrap 在 Chromium 和 Linux 版 Chrome、Linux 版 Firefox 和 Internet Explorer 7 上的表现也是很不错的，虽然我们不对其进行官方支持。</p>
                    <p><a href="../browser-bugs/">浏览器 bug 列表</a>中列出了影响 Bootstrap 正常功能的浏览器 bug。</p>
                    <h3 class="item-header" id="support-ie8-ie9">Internet Explorer 8 和 9</h3>
                    <p>Internet Explorer 8 和 9 是被支持的，然而，你要知道，很多 CSS3 属性和 HTML5 元素 -- 例如，圆角矩形和投影 -- 是肯定不被支持的。另外， <strong>Internet Explorer 8 需要 <a href="https://github.com/scottjehl/Respond">Respond.js</a> 配合才能实现对媒体查询（media query）的支持。</strong></p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th class="col-xs-4">Feature</th>
                                    <th class="col-xs-4">Internet Explorer 8</th>
                                    <th class="col-xs-4">Internet Explorer 9</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row"><code>border-radius</code></th>
                                    <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 不支持</td>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                </tr>
                                <tr>
                                    <th scope="row"><code>box-shadow</code></th>
                                    <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 不支持</td>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持</td>
                                </tr>
                                <tr>
                                    <th scope="row"><code>transform</code></th>
                                    <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 不支持</td>
                                    <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 支持, with <code>-ms</code> prefix</td>
                                </tr>
                                <tr>
                                    <th scope="row"><code>transition</code></th>
                                    <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 不支持</td>
                                </tr>
                                <tr>
                                    <th scope="row"><code>placeholder</code></th>
                                    <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 不支持</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <p>请参考 <a href="http://caniuse.com/">Can I use...</a> 以获取详细的 CSS3 和 HTML5 特性在各个浏览器上的支持情况。</p>
                    <h3 class="item-header" id="support-ie8-respondjs">Internet Explorer 8 与 Respond.js</h3>
                    <p>在开发环境和生产（线上）环境需要支持 Internet Explorer 8 时，请务必注意下面给出的警告。</p>
                    <h4 class="subitem-header" id="respond-js-x-domain">Respond.js 与 跨域（cross-domain） CSS 的问题</h4>
                    <p>如果 Respond.js 和 CSS 文件被放在不同的域名或子域名下面（例如，使用CDN）时需要一些额外的设置。请参考 <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup"> Respond.js 文档</a> 获取详细信息。</p>
                    <h4 class="subitem-header" id="respond-file-proto">Respond.js 与 <code>file://</code> 协议</h4>
                    <p>由于浏览器的安全机制，Respond.js 不能在通过 <code>file://</code> 协议（打开本地HTML文件所用的协议）访问的页面上发挥正常的功能。如果需要测试 IE8 下面的响应式特性，务必通过 http 协议访问页面（例如搭建 apache、nginx 等）。请参考 <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">Respond.js 文档</a>获取更多信息。</p>
                    <h4 class="subitem-header" id="respond-import">Respond.js 与 <code>@import</code> 指令</h4>
                    <p>Respond.js 不支持通过 <code>@import</code> 指令所引入的 CSS 文件。例如，Drupal 一般被配置为通过 <code>@import</code> 指令引入CSS文件，Respond.js 对其将无法起到作用。请参考 <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">Respond.js 文档</a>获取更多信息。</p>
                    <h3 class="item-header" id="support-ie8-box-sizing">Internet Explorer 8 与 box-sizing 属性</h3>
                    <p>当 <code>box-sizing: border-box;</code> 与 <code>min-width</code>、<code>max-width</code>、<code>min-height</code> 或 <code>max-height</code> 一同使用时，IE8 不能完全支持 box-sizing 属性。由于此原因，从 Bootstrap v3.0.1 版本开始，我们不再为 <code>.container</code> 赋予 <code>max-width</code> 属性。</p>
                    <h3 class="item-header" id="support-ie8-font-face">Internet Explorer 8 与 @font-face</h3>
                    <p>当 <code>@font-face</code> 与 <code>:before</code> 在 IE8 下共同使用时会出现问题。由于 Bootstrap 对 Glyphicons 的样式设置使用了这一组合方式，如果某个页面被浏览器缓存了，并且此页面不是通过点击“刷新”按钮或通过 iframe 加载的，那么就会导致字体文件尚未加载的情况下就开始绘制此页面。当鼠标滑过页面（body）时，页面上的某些图标就会显现，鼠标滑过其他没有显现的图标时，这些图标就能显示出来了。请参考 <a href="https://github.com/twbs/bootstrap/issues/13863">issue #13863</a> 了解详细信息。</p>
                    <h3 class="item-header" id="support-ie-compatibility-modes">IE 兼容模式</h3>
                    <p>Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 <code>&lt;meta&gt;</code> 标签加入到你的页面中：</p>
                    <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=edge"</span><span class="nt">&gt;</span></code></pre></div>
                    <p>按
                        <kbd>F12</kbd> 键打开 IE 的调试工具，就可以看到 IE 当前的渲染模式是什么。</p>
                    <p>此 meta 标签被包含在了所有 Bootstrap 文档和实例页面中，为的就是在每个被支持的 IE 版本中拥有最好的绘制效果。</p>
                    <p>请参考 <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">这个发表在 StackOverflow 上的问题</a>。</p>
                    <h3 class="item-header" id="support-chinese-browsers-renderer-modes">国产浏览器高速模式</h3>
                    <p>国内浏览器厂商一般都支持兼容模式（即 IE 内核）和高速模式（即 webkit 内核），不幸的是，所有国产浏览器都是默认使用兼容模式，这就造成由于低版本 IE （IE8 及以下）内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。幸运的是，国内浏览器厂商逐渐意识到了这一点，某些厂商已经开始有所作为了！</p>
                    <p>将下面的 <code>&lt;meta&gt;</code> 标签加入到页面中，可以让部分国产浏览器默认采用高速模式渲染页面：</p>
                    <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"renderer"</span> <span class="na">content=</span><span class="s">"webkit"</span><span class="nt">&gt;</span></code></pre></div>
                    <p>目前只有<a href="http://se.360.cn/v6/help/meta.html">360浏览器</a>支持此 <code>&lt;meta&gt;</code> 标签。希望更多国内浏览器尽快采取行动、尽快进入高速时代！</p>
                    <h3 class="item-header" id="support-ie10-width">Windows 8 中的 Internet Explorer 10 和 Windows Phone 8</h3>
                    <p>Internet Explorer 10 并没有对 <strong>屏幕的宽度</strong> 和 <strong>视口（viewport）的宽度</strong> 进行区分，这就导致 Bootstrap 中的媒体查询并不能很好的发挥作用。为了解决这个问题，你可以引入下面列出的这段 CSS 代码暂时修复此问题：</p>
                    <div class="highlight">
<pre class="prettyprint lang-css">
  @-ms-viewport       { width: device-width; }
</pre>
                    </div>
                    <p>然而，这样做并不能对 Windows Phone 8 <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Update 3 (a.k.a. GDR3)</a> 版本之前的设备起作用，由于这样做将导致 Windows Phone 8 设备按照桌面浏览器的方式呈现页面，而不是较窄的“手机”呈现方式，为了解决这个问题，还需要<strong>加入以下 CSS 和 JavaScript 代码来化解此问题</strong>。</p>
                    <div class="highlight">
<pre class="prettyprint lang-css">
  @-webkit-viewport   { width: device-width; }
  @-moz-viewport      { width: device-width; }
  @-ms-viewport       { width: device-width; }
  @-o-viewport        { width: device-width; }
  @viewport           { width: device-width; }
</pre>
                    </div>
                    <div class="highlight">      
<pre class="prettyprint lang-js">
 if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
   var msViewportStyle = document.createElement('style')
   msViewportStyle.appendChild(
     document.createTextNode(
       '@-ms-viewport{width:auto!important}'
     )
   )
   document.querySelector('head').appendChild(msViewportStyle)
 } 
</pre>
                    </div>
                    <p>请查看 <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a> 以了解更多信息。</p>
                    <p>作为提醒，我们将上面的代码加入到了所有 Bootstrap 文档和实例页面中。</p>
                    <h3 class="item-header" id="support-safari-percentages">Safari 对百分比数字凑整的问题</h3>
                    <p>OS X 上搭载的 v7.1 以前 Safari 和 iOS v8.0 上搭载的 Safari 浏览器的绘制引擎对于处理 <code>.col-*-1</code> 类所对应的很长的百分比小数存在 bug。也就是说，如果你在一行（row）之中定义了12个单独的列（.col-*-1），你就会看到这一行比其他行要短一些。除了升级 Safari/iOS 外，有以下几种方式来应对此问题：</p>
                    <ul>
                        <li>为最后一列添加 <code>.pull-right</code> 类，将其暴力向右对齐</li>
                        <li>手动调整百分比数字，让其针对Safari表现更好（这比第一种方式更困难）</li>
                    </ul>
                    <h3 class="item-header" id="support-fixed-position-keyboards">模态框、导航条和虚拟键盘</h3>
                    <h4 class="subitem-header">超出范围和滚动</h4>
                    <p><code>&lt;body&gt;</code> 元素在 iOS 和 Android 上对 <code>overflow: hidden</code> 的支持很有限。结果就是，在这两种设备上的浏览器中，当你滚动屏幕超过模态框的顶部或底部时，<code>&lt;body&gt;</code> 中的内容将开始随着滚动。</p>
                    <h4 class="subitem-header">虚拟键盘</h4>
                    <p>还有，如果你正在使用 fixed 定位的导航条或在模态框上面使用输入框，还会遇到 iOS 在页面绘制上的 bug，当触发虚拟键盘之后，其不会更新 fixed 定位的元素的位置。这里有几种解决方案，包括将 fixed 定位转变为 <code>position: absolute</code> 定位，或者启动一个定时器手工修正组件的位置。这些没有加入 Bootstrap 中，因此，需要由你自己选择最好的解决方案并加入到你的应用中。</p>
                    <h4 class="subitem-header">导航条上的下拉菜单</h4>
                    <p>在 iOS 设备上，由于导航组件（nav）的复杂的 z-indexing 属性，<code>.dropdown-backdrop</code> 元素并未被使用。因此，为了关闭导航条上的下拉菜单，必须直接点击下拉菜单上的元素（或者<a href="https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile">任何其他能够触发 iOS 上 click 事件的元素</a>）。</p>
                    <h3 class="item-header" id="support-browser-zooming">浏览器的缩放功能</h3>
                    <p>页面缩放功能不可避免的会将某些组件搞得乱七八糟，不光是 Bootstrap ，整个互联网上的所有页面都是这样。针对具体问题，我们或许可以修复它（如果有必要的话，请先搜索一下你的问题，看看是否已有解决方案，然后在向我们提交 issue）。然而，我们更倾向于忽略这些问题，由于这些问题除了一些 hack 手段，一般没有直接的解决方案。</p>
                    <h3 class="item-header" id="support-sticky-hover-mobile">移动设备上应用 <code>:hover</code>/<code>:focus</code></h3>
                    <p>尽管在大多数触摸屏上没有真正的悬停状态，大部分移动设备浏览器模拟了悬停（hover）状态并让 <code>:hover</code> 状态"多展现一会儿"。换句话说，轻触元素后开始应用 <code>:hover</code> 样式，并且在用户轻触其他的元素之后停止应用 <code>:hover</code> 样式。在这些浏览器中，Bootstrap 的 <code>:hover</code> 状态可能不是你所期望的。某些移动浏览器中的 <code>:focus</code> 状态也存在同样的问题。对于这些问题，除了完全清除这些样式，目前还没有简单的解决方法。</p>
                    <h3 class="item-header" id="support-printing">打印</h3>
                    <p>即便是在某些很现代的浏览器中，打印页面功能也还是存在很多陷阱。</p>
                    <p>举个例子，从 Chrome v32 开始，打印一个支持媒体查询的页面时，不管如何设置留白，Chrome 总是使用一个远远小于实际页面尺寸的视口宽度的值作为页面宽度。这就导致被打印的页面总是被呈现为在超小屏幕（extra-small）上的效果（也就是激活了 Bootstrap 针对超小屏幕的栅格排布方式）。 <a href="https://github.com/twbs/bootstrap/issues/12078">参考 #12078 了解更多信息。</a> 推荐解决方案：</p>
                    <ul>
                        <li>让你的页面在超小（extra-small）屏幕上看起来不那么太差劲。</li>
                        <li>修改 <code>@screen-*</code> Less 变量的值，让你的页面总是大于 extra-small </li>
                        <li>添加额外的媒体查询代码，针对打印机修改栅格阈值。</li>
                    </ul>
                    <p>另外，从Safari v8.0 开始，固定宽度的 <code>.container</code> 会导致 Safari 使用非常小的字号来打印页面。参见 <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> 了解跟多信息。下面这段 CSS 代码提供了一个临时解决方案：</p>
                    <div class="highlight">    
<pre class="prettyprint lang-css">
  @media print {
      .container {
      width: auto;
     }
  }
</pre>
                    </div>        
                    <h3 class="item-header" id="support-android-stock-browser">Android 系统默认浏览器</h3>
                    <p>Android 4.1 （甚至某些较新版本）系统的默认浏览器被设置为默认打开页面的应用程序（不同于 Chrome）。不幸的是， 一般情况下，这些浏览器有很多bug以及和CSS标准不一致的地方。</p>
                    <h4 class="subitem-header">选择菜单</h4>
                    <p>如果 <code>&lt;select&gt;</code> 元素应用了 <code>border-radius</code> 和/或 <code>border</code> 样式，Android 系统默认的浏览器将不会显示侧边栏控件。（详见 <a href="http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">这个 StackOverflow 上的问题</a> 。） 使用下面的代码片段来删除有问题的CSS并且在Android系统默认的浏览器上，<code>&lt;select&gt;</code> as an呈现为无样式元素。可以通过检测用户代理（user agent）的特征串来避免干扰 Chrome、Safari和 Mozilla 浏览器。</p>
                    <div class="highlight"> 
<pre  class="prettyprint lang-js">
&lt;script&gt;
    $(function () {
      var nua = navigator.userAgent
      var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
      if (isAndroid) {
        $('select.form-control').removeClass('form-control').css('width', '100%')
      }
    })
&lt;/script&gt;                
</pre>
                    </div> 
                    <p>见 <a href="http://jsbin.com/kuvoz/1"> JS Bin 上的 demo。</a></p>
                    <h3 class="item-header" id="support-validators">W3C 页面源码校验</h3>
                    <p>为了在老旧的浏览器上尽量提供最好的展现，Bootstrap 针对浏览器使用了一些 <a href="http://browserhacks.com">CSS hack</a> 手段，为的是针对特定浏览器版本弥补浏览器自身的 bug。这些 CSS hack 手段在 CSS 校验器那里会被认为是无效代码。还有一些地方，我们使用了某些未被完全标准化的 CSS 特性，纯粹是为了实现渐进式增强的思路。</p>
                    <p>上面提到的这些校验器报告的警告信息并不会对实际使用造成影响，因为非 hack 部分的 CSS 是完全合格的，hack 部分不会对非 hack 部分的功能产生影响，这就是我们故意无视这些校验器警告的原因。</p>
                    <p>同样，我们的 HTML 文档中也有一些针对 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Firefox bug</a> 的 hack 代码，在 HTML 校验时也会被警告。</p>
                </div>
                <div class="bs-docs-section">
                    <h2 id="third-parties" class="page-header">对第三方组件的支持</h2>
                    <div class="bs-callout bs-callout-info" id="callout-glyphicons-location">
                      <p><i class="fa fa-pencil-square-o fa-2x"></i> 以下说明信息来自于 <a href="http://v3.bootcss.com/">Bootstrap中文官方</a> 文档说明，同样适用于Mower。</p>
                    </div>
                    <p class="lead">虽然我们并不官方支持任何第三方插件，我们还是提供一些建议，帮你避免可能在你的项目中会出现的问题。</p>
                    <h3 class="item-header" id="third-box-sizing">box-sizing 属性</h3>
                    <p>某些第三方软件，包括 Google 地图和 Google 定制搜索引擎都会由于 <code>* { box-sizing: border-box; }</code> 的设置而产生冲突，这一设置使 <code>padding</code> 不影响页面元素最终宽度的计算。更多信息请参考 <a href="http://css-tricks.com/box-sizing/">盒模型与尺寸计算 - CSS Tricks</a>。</p>
                    <p>根据不同情况，你可能需要根据情况覆盖（第1种选择）或为所有区域设置（第2种选择）。</p>
                    <div class="highlight">
<pre class="prettyprint lang-css">
/* Box-sizing resets
*
* 为了避免 Bootstrap 设置的全局盒模型所带来的影响，可以重置单个页面元素或覆盖整个区域的盒模型。
* 你有两种选择：覆盖单个页面元素或重置整个区域。它们都可以通过纯 CSS 或 LESS 代码的形式实现。
*/

/* Option 1A: 通过 CSS 代码覆盖单个页面元素的盒模型 */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: 通过使用 Bootstrap 提供的 LESS mixin 覆盖单个页面元素的盒模型 */
.element {
  .box-sizing(content-box);
}

/* Option 2A: 通过 CSS 代码重置整个区域 */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: 通过使用自定义的 LESS mixin 重置整个区域 */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}
</pre></div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary">
                    <ul class="nav bs-docs-sidenav">

                        <li>
                            <a href="#intruduction">说明</a>
                             <ul class="nav">
                                <li><a href="#with-bootstrap">与bootstrap的关系</a>
                                </li>
                                <li><a href="#choice-mower">选择使用Mower</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#rules">约定</a>
                            <ul class="nav">
                                <li><a href="#rules-uitype">UI元素类型及定义</a>
                                </li>
                                <li><a href="#rules-status">通用状态和参数</a>
                                </li>
                                 <li><a href="#rules-naming">界面元素的命名</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#fileContent">文件目录结构</a>
                            <ul class="nav">
                                <li><a href="#fileContent-ctx">预编译的内容</a>
                                </li>
                                <li><a href="#fileContent-struc">源码目录结构</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#compile">编译及定制</a>
                            <ul class="nav">
                                <li><a href="#grunt-installing">安装Grunt</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#support">浏览器及设备的支持情况</a>
                            <ul class="nav">
                                <li><a href="#support-browsers">被支持的浏览器</a>
                                </li>
                                <li><a href="#support-ie8-ie9">Internet Explorer 8和9</a>
                                </li>
                                <li><a href="#support-ie8-respondjs">IE8 与 Respond.js</a>
                                </li>
                                <li><a href="#support-ie8-box-sizing">IE8 与 box-sizing属性</a>
                                </li>
                                <li><a href="#support-ie8-font-face">IE8 与 @font-face</a>
                                </li>
                                <li><a href="#support-ie-compatibility-modes">IE兼容模式</a>
                                </li>
                                <li><a href="#support-chinese-browsers-renderer-modes">国产浏览器高速模式</a>
                                </li>
                                <li><a href="#support-ie10-width">Windows 8 中的IE10 和 Windows (Phone) 8</a>
                                </li>
                                <li><a href="#support-safari-percentages">Safari对百分比数字凑整的问题</a>
                                </li>
                                <li><a href="#support-fixed-position-keyboards">模态框、导航条和虚拟键盘</a>
                                </li>
                                <li><a href="#support-browser-zooming">浏览器的缩放功能</a>
                                </li>
                                <li><a href="#support-sticky-hover-mobile">移动设备上应用：hover/:focus</a>
                                </li>
                                <li><a href="#support-printing">打印</a>
                                </li>
                                <li><a href="#support-android-stock-browser">Android 系统默认浏览器</a>
                                </li>
                                <li><a href="#support-validators">W3C 页面源码校验</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#third-parties">对第三方组件的支持</a>
                             <ul class="nav">
                                <li><a href="#third-box-sizing">box-sizing 属性</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <a class="back-to-top" href="#top">
              返回顶部
            </a>

                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="libs/jquery/jquery-1.11.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script src="assets/plugins/google-code-prettify/prettify.js"></script>

    <script src="assets/js/docs.min.js"></script>
</body>

</html>
